import styled from 'styled-components'
import earthRotate from '@/assets/images/earth-rotate.gif'
import type { RightPageDataType } from '@/api/data/rightPageData'
import { BorderBox13 } from '@jiaminghi/data-view-react'
import { get } from '@/api/http'
import { rightPageDataApi } from '@/api/data'
import { ResultEnum } from '@/enums/httpEnum'
import { useEffect, useState } from 'react'
import { CommonTitle } from '../Title'
import { BrowseCategories } from './echarts/BrowseCategories'
import { UserIdentityCategory } from './echarts/UserIdentityCategory'
import { FeedBack } from './echarts/FeedBack'
import { OfflinePortal } from './echarts/OfflinePortal'

const RightContainer = styled.div`
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 1fr 1.2fr 2fr;
	gap: 20px;
`

export const Right = () => {
	const [rightData, setRightData] = useState<RightPageDataType>()

	const fetchData = async () => {
		const { code, data } = await get(rightPageDataApi)
		if (code === ResultEnum.SUCCESS) {
			setRightData(data)
		}
	}

	useEffect(() => {
		fetchData()
	}, [])

	return rightData ? (
		<RightContainer>
			<div className="w-full h-full flex flex-col rounded-[10px]">
				<CommonTitle title="关联数据类别分布" />
				<div className="flex-1 flex items-center mt-[15px] overflow-hidden">
					<BrowseCategories
						browseCategories={rightData.browseCategories}></BrowseCategories>
					<div>
						<img
							alt="地球"
							className="w-40 overflow-hidden rounded-[50%]"
							src={earthRotate}
						/>
					</div>
				</div>
			</div>
			<div className="w-full h-full flex flex-col rounded-[10px]">
				<CommonTitle title="平均用户类别排布" />
				<div className="flex-1">
					<UserIdentityCategory
						userIdentityCategory={rightData.userIdentityCategory}
					/>
				</div>
			</div>
			<BorderBox13 className="p-[15px]!">
				<div className="w-full h-full flex flex-col rounded-[10px] bg-[#13192f99]">
					<CommonTitle title="今日线下门户流量" />
					<div className="mt-2 flex items-center justify-around">
						{rightData.offline.feedback.map((el, index) => {
							return (
								<div className="flex flex-col items-center" key={index}>
									<FeedBack FeedbackData={el} />
									<span className="font-bold text-base text-transparent bg-linear-to-b from-[#fff] to-[#6176F4] bg-clip-text">
										{el.title}
									</span>
								</div>
							)
						})}
					</div>
					<div className="flex-1 mt-4">
						<OfflinePortal
							offlinePortalData={rightData.offline.offlinePortalData}
						/>
					</div>
				</div>
			</BorderBox13>
		</RightContainer>
	) : (
		'loading'
	)
}
